{% extends "base.html" %}

{% block title %}消息传递 - 安全分享您的信息{% endblock %}

{% block content %}
<div class="hero">
    <h1 class="hero-title">安全消息传递系统</h1>
    <p class="hero-subtitle">使用6位数密码加密您的消息，阅读后自动销毁</p>
</div>

<div class="selection-container">
    <div class="selection-card" id="create-selection">
        <div class="selection-icon">
            <i class="fas fa-paper-plane"></i>
        </div>
        <h2>发送消息</h2>
        <p>创建一条加密消息并分享给他人</p>
        <button class="btn btn-primary">选择</button>
    </div>
    
    <div class="selection-card" id="retrieve-selection">
        <div class="selection-icon">
            <i class="fas fa-envelope-open-text"></i>
        </div>
        <h2>接收消息</h2>
        <p>输入消息ID和密码查看消息</p>
        <button class="btn btn-primary">选择</button>
    </div>
    <div class="selection-card" id="locker-selection">
        <div class="selection-icon">
            <i class="fas fa-inbox"></i>
        </div>
        <h2>消息柜</h2>
        <p>使用编号消息柜存取消息</p>
        <a href="{{ url_for('lockers') }}" class="btn btn-primary">
            <i class="fas fa-boxes"></i> 查看消息柜
        </a>
    </div>
</div>

<div class="card create-message-card hidden" id="create-card">
    <div class="card-header">
        <h2><i class="fas fa-pen"></i> 创建加密消息</h2>
    </div>
    <div class="card-body">
        <form id="create-message-form">
            <div class="form-group">
                <label for="message-content">您的消息内容</label>
                <textarea id="message-content" name="content" rows="6" placeholder="在此输入您的秘密消息..." required></textarea>
            </div>
            
            <div class="form-group">
                <label for="message-password">6位数密码</label>
                <div class="password-input-container">
                    <input type="password" id="message-password" name="password" 
                           placeholder="请输入6位数密码" 
                           pattern="[0-9]{6}" 
                           maxlength="6" 
                           inputmode="numeric"
                           required>
                    <button type="button" class="toggle-password" aria-label="显示/隐藏密码">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="password-hint">密码必须是6位数字(0-9)</div>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary back-btn">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-lock"></i> 创建加密消息
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card retrieve-message-card hidden" id="retrieve-card">
    <div class="card-header">
        <h2><i class="fas fa-unlock-alt"></i> 接收加密消息</h2>
    </div>
    <div class="card-body">
        <p class="message-info">请输入消息ID和6位数密码来查看消息。消息在查看后将被删除。</p>
        
        <form id="retrieve-message-form">
            <div class="form-group">
                <label for="message-id-input">消息ID</label>
                <input type="text" id="message-id-input" name="message_id" placeholder="请输入消息ID" required>
            </div>
            
            <div class="form-group">
                <label for="retrieve-password">6位数密码</label>
                <div class="password-input-container">
                    <input type="password" id="retrieve-password" name="password" 
                           placeholder="请输入6位数密码" 
                           pattern="[0-9]{6}" 
                           maxlength="6" 
                           inputmode="numeric"
                           required>
                    <button type="button" class="toggle-password" aria-label="显示/隐藏密码">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary back-btn">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-key"></i> 查看消息
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card result-card hidden" id="result-card">
    <div class="card-header">
        <h2><i class="fas fa-check-circle"></i> 消息创建成功！</h2>
    </div>
    <div class="card-body">
        <p>您的加密消息已创建成功。请将以下信息分享给接收者：</p>
        
        <div class="info-group">
            <label>消息ID：</label>
            <div class="link-container">
                <input type="text" id="message-id" readonly>
                <button id="copy-id" class="btn btn-icon" aria-label="复制ID">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
        
        <div class="info-group">
            <label>访问链接：</label>
            <div class="link-container">
                <input type="text" id="message-link" readonly>
                <button id="copy-link" class="btn btn-icon" aria-label="复制链接">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
        
        <div class="instructions">
            <p><strong>重要提示：</strong> 请务必单独分享6位数密码！</p>
            <p>该消息在被查看后将被永久删除。</p>
        </div>
        
        <div class="form-actions">
            <button id="back-to-home" class="btn btn-secondary">
                <i class="fas fa-home"></i> 返回首页
            </button>
            <button id="create-new" class="btn btn-primary">
                <i class="fas fa-plus"></i> 创建新消息
            </button>
        </div>
    </div>
</div>

<div class="card message-content-card hidden" id="message-content-card">
    <div class="card-header">
        <h2><i class="fas fa-envelope-open"></i> 查看加密消息</h2>
    </div>
    <div class="card-body">
        <div class="message-content-wrapper">
            <h3>消息内容</h3>
            <div class="message-content" id="message-content-view"></div>
        </div>
        
        <div class="form-actions">
            <button id="copy-message" class="btn btn-secondary">
                <i class="fas fa-copy"></i> 复制消息
            </button>
            <button id="back-to-home-after-view" class="btn btn-primary">
                <i class="fas fa-home"></i> 返回首页
            </button>
        </div>
        
        <div class="message-notice">
            <p><i class="fas fa-exclamation-circle"></i> 该消息已从服务器删除，无法再次查看。</p>
        </div>
    </div>
</div>

<div class="features">
    <div class="feature">
        <div class="feature-icon">
            <i class="fas fa-shield-alt"></i>
        </div>
        <h3>安全加密</h3>
        <p>消息使用密码加密保护</p>
    </div>
    
    <div class="feature">
        <div class="feature-icon">
            <i class="fas fa-trash-alt"></i>
        </div>
        <h3>阅后即焚</h3>
        <p>消息在被查看后自动删除</p>
    </div>
    
    <div class="feature">
        <div class="feature-icon">
            <i class="fas fa-user-secret"></i>
        </div>
        <h3>完全匿名</h3>
        <p>无需注册或提供个人信息</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}
